import React, { useState, useRef } from 'react';
import { Form, Input, DatePicker, Select, Button, Space, message, Card, Row, Col, Typography } from 'antd';
import { DownloadOutlined, ReloadOutlined } from '@ant-design/icons';
import { useDispatch, useSelector } from 'react-redux';
import QRCode from 'qrcode';
import { QRCodeSVG } from 'qrcode.react';
import { generateQrCode } from '../redux/features/deviceSlice';
import { validatePhone, formatDate } from '../utils/tools';
import './GenerateQRCodePage.css';

const { Option } = Select;
const { TextArea } = Input;
const { Title, Paragraph } = Typography;

const GenerateQRCodePage = () => {
  const [form] = Form.useForm();
  const [qrCodeContent, setQrCodeContent] = useState(null);
  const [generating, setGenerating] = useState(false);
  const canvasRef = useRef(null);
  const dispatch = useDispatch();
  const { isLoading, error } = useSelector((state) => state.device);

  // 设备类型选项
  const deviceTypes = [
    '服务器', '网络设备', '存储设备', '安全设备',
    '终端设备', '办公设备', '生产设备', '其他设备'
  ];

  // 处理表单提交，生成二维码
  const handleGenerate = async (values) => {
    try {
      setGenerating(true);
      
      console.log('表单提交的值:', values);
      
      // 验证必填字段
      if (!values.device_name || !values.device_type || !values.device_code) {
        message.error('请填写所有必填字段');
        return;
      }
      
      // 格式化设备信息
      const deviceInfo = {
        device_name: values.device_name.trim(),
        device_type: values.device_type,
        device_code: values.device_code.trim(),
        production_date: values.production_date ? formatDate(values.production_date) : null,
        description: values.description || '',
        generated_at: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'),
      };
      
      console.log('格式化后的设备信息:', deviceInfo);

      // 将设备信息转换为JSON字符串作为二维码内容
      const content = JSON.stringify(deviceInfo);
      console.log('二维码内容:', content);
      
      // 直接设置二维码内容，使用React组件渲染
      setQrCodeContent(content);
      console.log('设置二维码内容成功');
      
      // 同时生成canvas版本用于下载功能
      if (canvasRef.current) {
        try {
          await QRCode.toCanvas(canvasRef.current, content, {
            width: 256,
            margin: 0,
            color: {
              dark: '#000000',
              light: '#ffffff'
            }
          });
          console.log('Canvas二维码生成成功，用于下载功能');
        } catch (canvasError) {
          console.error('Canvas二维码生成失败:', canvasError);
        }
      }

      // 调用后端API保存设备信息
      const resultAction = await dispatch(generateQrCode(deviceInfo));
      
      // 检查dispatch结果
      if (generateQrCode.fulfilled.match(resultAction)) {
        message.success('二维码生成成功');
      } else {
        const errorMessage = resultAction.payload || '生成二维码失败';
        message.error(errorMessage);
      }
    } catch (error) {
      console.error('生成二维码失败:', error);
      message.error('生成二维码失败，请稍后再试');
    } finally {
      setGenerating(false);
    }
  };

  // 处理下载二维码
  const handleDownload = async () => {
    try {
      if (!canvasRef.current) {
        message.error('没有可下载的二维码');
        return;
      }
      
      // 转换为blob并下载
      canvasRef.current.toBlob((blob) => {
        if (blob) {
          // 创建下载链接
          const url = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = `device_${form.getFieldValue('device_code') || 'qrcode'}_qrcode.png`;
          document.body.appendChild(a);
          a.click();
          
          // 清理
          document.body.removeChild(a);
          URL.revokeObjectURL(url);
          message.success('二维码下载成功');
        }
      });
    } catch (error) {
      console.error('下载二维码失败:', error);
      message.error('下载二维码失败，请稍后再试');
    }
  };

  // 处理重置
  const handleReset = () => {
    form.resetFields();
    setQrCodeContent(null);
  };

  return (
    <div className="generate-qrcode-container">
      <div className="page-header">
        <Title level={3} className="page-title">
          生成设备二维码
        </Title>
        <Paragraph className="page-description">
          填写设备信息，生成专属二维码。生成的二维码包含设备的基本信息，可以通过扫描快速查看和管理设备。
        </Paragraph>
      </div>

      <Row gutter={[24, 24]} className="content-row">
        <Col xs={24} lg={12}>
          <Card title="设备信息" className="form-card">
            <Form
              form={form}
              layout="vertical"
              onFinish={handleGenerate}
              className="device-form"
            >
              <Form.Item
                label="设备名称"
                name="device_name"
                rules={[
                  { required: true, message: '请输入设备名称' },
                  { max: 100, message: '设备名称不能超过100个字符' }
                ]}
              >
                <Input placeholder="请输入设备名称" />
              </Form.Item>

              <Form.Item
                label="设备类型"
                name="device_type"
                rules={[
                  { required: true, message: '请选择设备类型' }
                ]}
              >
                <Select placeholder="请选择设备类型">
                  {deviceTypes.map((type) => (
                    <Option key={type} value={type}>{type}</Option>
                  ))}
                </Select>
              </Form.Item>

              <Form.Item
                label="设备编号"
                name="device_code"
                rules={[
                  { required: true, message: '请输入设备编号' },
                  { max: 50, message: '设备编号不能超过50个字符' }
                ]}
              >
                <Input placeholder="请输入设备编号" />
              </Form.Item>

              <Form.Item
                label="生产日期"
                name="production_date"
                rules={[
                  { required: true, message: '请选择生产日期' }
                ]}
              >
                <DatePicker
                  style={{ width: '100%' }}
                  placeholder="请选择生产日期"
                />
              </Form.Item>

              <Form.Item
                label="设备描述"
                name="description"
                rules={[
                  { max: 500, message: '设备描述不能超过500个字符' }
                ]}
              >
                <TextArea rows={4} placeholder="请输入设备描述（可选）" />
              </Form.Item>

              <Form.Item>
                <Space>
                  <Button onClick={handleReset} disabled={generating || isLoading}>
                    重置
                  </Button>
                  <Button 
                    type="primary" 
                    htmlType="submit" 
                    loading={generating || isLoading}
                  >
                    生成二维码
                  </Button>
                </Space>
              </Form.Item>
            </Form>
          </Card>
        </Col>

        <Col xs={24} lg={12}>
          <Card title="生成结果" className="result-card">
            {qrCodeContent ? (
              <div className="qrcode-result">
                <div className="qrcode-container">
                  <canvas ref={canvasRef} style={{ display: 'none' }} />
                  {qrCodeContent && (
                    <div className="qrcode-react-container">
                      <QRCodeSVG 
                        value={qrCodeContent} 
                        size={256} 
                        fgColor="#000000" 
                        bgColor="#ffffff" 
                        level="M" 
                        includeMargin={false} 
                      />
                    </div>
                  )}
                </div>
                
                <div className="qrcode-info">
                  <div className="info-item">
                    <span className="info-label">设备名称：</span>
                    <span className="info-value">{form.getFieldValue('device_name')}</span>
                  </div>
                  <div className="info-item">
                    <span className="info-label">设备编号：</span>
                    <span className="info-value">{form.getFieldValue('device_code')}</span>
                  </div>
                  <div className="info-item">
                    <span className="info-label">生成时间：</span>
                    <span className="info-value">{formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')}</span>
                  </div>
                </div>
                
                <div className="qrcode-actions">
                  <Space size="middle">
                    <Button 
                      type="primary" 
                      icon={<DownloadOutlined />} 
                      onClick={handleDownload}
                    >
                      下载二维码
                    </Button>
                    <Button 
                      icon={<ReloadOutlined />} 
                      onClick={() => setQrCodeContent(null)}
                    >
                      重新生成
                    </Button>
                  </Space>
                </div>
              </div>
            ) : (
              <div className="empty-result">
                <div className="empty-icon">
                  <div style={{ fontSize: '48px', color: '#ccc' }}>📱</div>
                </div>
                <div className="empty-text">
                  请填写设备信息并点击"生成二维码"按钮
                </div>
              </div>
            )}
          </Card>
        </Col>
      </Row>

      {/* 使用说明卡片 */}
      <Card title="使用说明" className="guide-card">
        <div className="guide-content">
          <div className="guide-item">
            <div className="guide-icon">1</div>
            <div className="guide-text">填写设备的基本信息，包括名称、类型、编号等。</div>
          </div>
          <div className="guide-item">
            <div className="guide-icon">2</div>
            <div className="guide-text">点击"生成二维码"按钮，系统会为设备生成专属二维码。</div>
          </div>
          <div className="guide-item">
            <div className="guide-icon">3</div>
            <div className="guide-text">下载二维码图片并打印，粘贴到对应的设备上。</div>
          </div>
          <div className="guide-item">
            <div className="guide-icon">4</div>
            <div className="guide-text">通过扫描二维码，可以快速查看和管理设备信息。</div>
          </div>
        </div>
      </Card>

      {error && (
        <div className="error-message">
          {typeof error === 'string' ? error : error.message || '发生错误，请稍后再试'}
        </div>
      )}
    </div>
  );
};

export default GenerateQRCodePage;